<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css三栏布局</title>
</head>
<style>
    html,
    body {
        padding: 0;
        margin: 0;
    }
    
    .layout div {
        min-height: 100px;
        margin-bottom: 30px;
    }
</style>

<body>
    <!-- float -->
    <section class="layout float">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>方法一：浮动方法</h1>
            三栏布局 三栏布局,三栏布局,三栏布局,三栏布局,三栏布局, Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis iusto deleniti blanditiis, eveniet velit magni fuga pariatur, sunt sed rerum debitis laudantium labore, autem ipsa illo iste! Numquam, tempore cumque?
        </div>
        <style>
            .layout.float .left {
                float: left;
                width: 300px;
                background: red;
            }
            
            .layout.float .right {
                float: right;
                width: 300px;
                background: red;
            }
            
            .float .center {
                background: green;
            }
        </style>
    </section>
    <!-- absolute -->
    <section class="layout absolute">
        <div class="left"></div>
        <div class="center">
            <h1>方法二：绝对定位</h1>
            三栏布局 三栏布局,三栏布局,三栏布局,三栏布局,三栏布局, Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque a libero aperiam autem labore quam, recusandae iure nobis necessitatibus placeat quis dignissimos omnis accusamus possimus repudiandae eveniet tempore maxime
            impedit.
        </div>
        <div class="right"></div>
    </section>
    <style>
        .layout.absolute .left {
            position: absolute;
            left: 0;
            background: red;
            width: 300px;
        }
        
        .layout.absolute .right {
            position: absolute;
            right: 0;
            background: red;
            width: 300px;
        }
        
        .layout.absolute .center {
            position: absolute;
            background: yellow;
            left: 300px;
            right: 300px;
        }
    </style>
    <!-- flex -->
    <section class="layout flex">
        <div class="flex-box">
            <div class="left"></div>
            <div class="center">
                <h1>方法三：FLex定位</h1>
                三栏布局 三栏布局,三栏布局,三栏布局,三栏布局,三栏布局, Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque a libero aperiam autem labore quam, recusandae iure nobis necessitatibus placeat quis dignissimos omnis accusamus possimus repudiandae eveniet tempore maxime
                impedit.
            </div>
            <div class="right"></div>
        </div>
    </section>
    <style>
        .layout.flex {
            margin-top: 200px;
        }
        
        .layout.flex .flex-box {
            display: flex;
        }
        
        .layout.flex .left {
            width: 300px;
            background: red;
        }
        
        .layout.flex .right {
            width: 300px;
            background: red;
        }
        
        .layout.flex .center {
            flex: 1;
            background: yellow;
        }
    </style>
    <!-- table-cell -->
    <section class="layout table">
        <div class="table-box">
            <div class="left"></div>
            <div class="center">
                <h1>方法四：table定位</h1>
                三栏布局 三栏布局,三栏布局,三栏布局,三栏布局,三栏布局, Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque a libero aperiam autem labore quam, recusandae iure nobis necessitatibus placeat quis dignissimos omnis accusamus possimus repudiandae eveniet tempore maxime
                impedit.
            </div>
            <div class="right"></div>

        </div>
    </section>
    <style>
        .layout.table .table-box {
            display: table;
            width: 100%;
            height: 100px;
        }
        
        .layout.table .table-box>div {
            display: table-cell;
        }
        
        .layout.table .left {
            width: 300px;
            background: red;
        }
        
        .layout.table .right {
            width: 300px;
            background: red;
        }
        
        .layout.table .center {
            background: yellow;
        }
    </style>
    <!-- grid -->
    <section class="layout grid">
        <div class="grid-box">
            <div class="left"></div>
            <div class="center">
                <h1>方法五：grid定位</h1>
                三栏布局 三栏布局,三栏布局,三栏布局,三栏布局,三栏布局, Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque a libero aperiam autem labore quam, recusandae iure nobis necessitatibus placeat quis dignissimos omnis accusamus possimus repudiandae eveniet tempore maxime
                impedit.
            </div>
            <div class="right"></div>

        </div>
    </section>
    <style>
        .layout.grid .grid-box {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
        
        .layout.grid .left {
            width: 300px;
            background: red;
        }
        
        .layout.grid .right {
            width: 300px;
            background: red;
        }
        
        .layout.grid .center {
            background: yellow;
        }
    </style>

</body>

</html>